<!-- 统计分析 -->
<template>
    <div class="sta">
        <div class="tb">
            <div class="box">
                <i class="iconfont">&#xe63a;</i>
                <div class="info">
                    <span>参与考试人数</span>
                    <div class="per">{{ count.peopleCount }}人</div>
                </div>
            </div>
             <div class="box">
                <i class="iconfont">&#xe651;</i>
                <div class="info">
                    <span>及格人数</span>
                    <div class="per">{{ passCount }}人</div>
                </div>
            </div>
            <div class="box">
                <i class="iconfont">&#xe651;</i>
                <div class="info">
                    <span>题目数量</span>
                    <div class="per">{{ count.questionCount }}道</div>
                </div>
            </div>
            <div class="box">
                <i class="iconfont">&#xe634;</i>
                <div class="info">
                    <span>参与专业</span>
                    <div class="per">{{ count.majorCount }}个</div>
                </div>
            </div>

        </div>
        <h1>答题相关数据</h1>
        <div class="answer">
            <div class="right">
                <StataAnala />
            </div>
        </div>
        <div class="wroques">
            <WroQuestVue />
        </div>
    </div>
</template>

<script>
import AnswerRelVue from "@/component/AnswerRel.vue";
import StataAnala from "@/component/StataAnala.vue";
import WroQuestVue from '@/component/WroQuest.vue';
import { information } from '../api/statistics';
import { getMajorPassScoreVo } from '../api/statistics';


export default {
    data() {
        return {
            count: {
                majorCount: 0,
                peopleCount: 0,
                questionCount: 0
            },
            passCount:0,
        };
    },

    components: {
        WroQuestVue,
        AnswerRelVue,
        StataAnala,
    },
    methods: {
        getComputedStyle(){
            // console.log(123456);
       let major= localStorage.getItem('major');
        if(!major){
            major=0;
        }
           getMajorPassScoreVo(major).then((res) => {
            // console.log(res.data,123456);
            res.data.data.forEach((i,index) => {
                this.passCount+=Number(i.passPerson);
            });
            // console.log(this.passCount);
            // this.passCount=res.data;
            
            // console.log(getdata,12456);
            // getdata.map((i)=>{
            //     this.majordata.push(i.major)
            //     this.totalPersondata.push(i.totalPerson)
            //     this.passPersondata.push(i.passPerson)
            //     this.drawLine();
            // })
            // this.count = res.data.data
        })
        }
    },
    mounted() {
        // window.location.reload();
       let major= localStorage.getItem('major');
        if(!major){
            major=0;
        }
    //    console.log(major,1234588369);
        information(major).then((res) => {
            this.count = res.data.data
            // console.log(res.data.data,123);
        })
        this.getComputedStyle();
        
    }

}
</script>


<style lang="scss" scoped>
.title {
    height: 50px;
    line-height: 50px;
    background-color: #f9f9f9;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    font-size: 17px;
    font-weight: bolder;
    padding: 0 20px;
}

.sta {
    padding: 0px 0 0 0px;
}

.tb {
    height: 100px;
    display: flex;
    width: 90%;
    min-width: 900px;
    // background-color: red;
    // justify-content: space-between;
    margin-bottom: 35px;
    margin-top: 20px;

    .box {
        padding-left: 10px;
        width: 16%;
        display: flex;
        margin-right: 50px;
        .iconfont {
            font-size: 50px;
            height: 90px;
            line-height: 90px;
        }

        .info {
            margin: 20px 0 0 10px;
            height: 60px;
            line-height: 25px;
            width: 70%;
            border-bottom: 1px black solid;

            span {
                font-size: 14px;
                color: #bbb;
            }

            .per {
                font-weight: 800;
                font-size: 22px;
            }
        }

    }

    .box:nth-child(1) {
        border-left: 10px #FB6260 solid;
    }

    .box:nth-child(2) {
        border-left: 10px #0099FF solid;
    }

    .box:nth-child(3) {
        border-left: 10px #8167F5 solid;
    }
    .box:nth-child(4) {
        border-left: 10px #67c1f5 solid;
    }
}

.answer {
    display: flex;
    width: 80%;
    margin-top: 15px;
}

.right {
    width: 90%;
    min-width: 900px;
    border: 1px #eee solid;
    // padding: 10px 30px 0 0;
}

h1 {
    font-size: 20px;
    // margin-top: 20px;
}

.wroques {
    margin-top: 50px;
    min-width: 900px;
}
</style>